<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* div{
            color: red;
        } */
        span{
            color: green;
        }
        /* 单独用标签选择器主要用来做一些初始化 */
        /* 浏览器会给很多元素添加一些默认样式，为了在开发过程中统一效果，
        也为了方便计算，我们会把这些默认样式清除。 */
        body{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        a{
            /* 初始化a标签的样式 */
            color: black;
            text-decoration: none;
        }
        .box1{
            background-color: red;
            /* 公共样式，抽离到box类，并添加到box1和box2*/
            /* border: 1px solid black;
            width: 120px;
            height: 120px;
            border-radius: 10px; */
           
        }
        .box2{
            background-color: rgb(150, 74, 74);
             /* 公共样式*/
            /* border: 1px solid black;
            width: 120px;
            height: 120px;
            border-radius: 10px; */
          
        }
        .box{
            border: 1px solid black;
            width: 120px;
            height: 120px;
            border-radius: 10px;
        }
        #box{
            width: 120px;
            height: 120px;
            background-color: rgb(170, 155, 238);
        }
        /* #box1 span{
            background-color: rgb(126, 205, 230);
        } */
        #box1 > span{
            background-color: rgb(165, 45, 165);
        }
        #box1{
            padding:20px;
            border: 1px solid black;
        }
        #box1:hover{
            background-color: rgb(83, 124, 136);
        }
        #box1:hover > span{
            background-color: #fff;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: rgb(187, 240, 157);
        }
        .box3:active{
            background-color: rgb(218, 89, 89);
        }
        .ipt:focus{
            background-color: rgb(88, 180, 85);
        }
        /* 群组选择器 */
        .box4,.box5{
            color: green;
        }
        /* 同级元素选择器 ，选择后面第一个元素，且该元素是span标签*/
        .btn:hover+span{
            color: red;
        }
        /* 同级元素选择器 ，选择后面所有的span元素*/
        .btn1:hover ~ span{
            color: red;
        }
        /* 选择div元素且该元素的属性title=a1 */
        /* div[title=a1]{
            color: red;
        } */
        /* 选择div元素，且该元素有title属性 */
        /* div[title]{
            color: green;
        } */
        /* 选择div元素，且该元素的title属性值包含hello */
        div[title~=hello]{
            color: greenyellow;
        }
    </style>
    <link rel="stylesheet" href="">
    <link rel="shortcut icon" href="" type="image/x-icon">
</head>
<body>
    <div>div</div>
    <span>span</span>
    <ul>
        <li>项目1</li>
    </ul>
    <a href="htpps://baidu.com">百度</a>
    <div class="box1 box">box1</div>
    <div class="box2 box">box2</div>
    <div id="box">#box</div>
    <div id="box1">
        <p class="p1">
            <span>span1</span>
        </p>
        <span>span2</span>
    </div>
    <div class="box3"></div>
    <input type="text" class="ipt">
    <div class="box4">box4</div>
    <div class="box5">box5</div>
    <button class="btn">指到我</button>
    <span>给你点颜色看看</span><br>
    <span>来嘛，哪个怕哪个嘛</span><br>
    <button class="btn1">你指到我干啥子啊</button><br>
    <span>给你点颜色看看</span><br>
    <span>来嘛，哪个怕哪个嘛</span>
    <div title="a1">title=a1</div>
    <div title="a2">title=a2</div>
    <div title="hello world">title=hello world</div>
    <div title="hello html">title=html</div>

</body>
</html>